<template>
    <div class="box">
        <div class="query-box">
            <div class="line-center">
                <el-row>
                    <el-form ref="form" :model="feedbackQueryForm" size="small" label-width="80px">
                        <el-col :span="5">
                            <el-form-item label="反馈类型">
                                <el-select clearable v-model="feedbackQueryForm.typeId" placeholder="请选择反馈类型" style="width: 200px;">
                                    <el-option label="系统" value="1"></el-option>
                                    <el-option label="活动" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain @click="querySubmit"
                                    icon="el-icon-search">搜索</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="2">
                            <el-button @click="HandleBatchDelete" type="danger" plain size="small"
                                icon="el-icon-delete">批量删除</el-button>
                        </el-col>
                        <el-col :span="10"></el-col>
                    </el-form>
                </el-row>
            </div>
        </div>

        <div class="table">
            <table-component @columnIds="getColumnIds" :loading="tableLoading" :table-data="feedbackRespData"
                :column="feedbackColumn">
                <template v-slot:operate="{ row }">
                    <el-button @click="deleteFeedback(row.id)" style="color: red;" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </table-component>
            <pagination-component :page-query="feedbackQueryForm" :page-total="total" @handleSizeChange="sizeChange"
                @handleCurrentChange="currentChange"></pagination-component>
        </div>
    </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import TableComponent from '@/components/TableComponent.vue';
import PaginationComponent from '@/components/PaginationComponent.vue';
// import { updateDeleteFeedback } from '@/api/common';
import { message, messageType } from '@/utils/message';
export default {
    components: {
        TableComponent,
        PaginationComponent,
    },
    data() {
        return {
            feedbackQueryForm: {
                typeId: '',
                page: 1,
                pageSize: 4,
                isDelete: 0
            },
            feedbackColumn: [
                { prop: 'userName', label: '用户名', width: '110' },
                { prop: 'typeName', label: '反馈类型', width: '130' },
                { prop: 'title', label: '反馈标题', width: '120' },
                { prop: 'content', label: '反馈内容', width: '160' },
                { prop: 'createTime', label: '创建时间', width: '210' },
                { prop: 'updateTime', label: '更新时间', width: '210' },
            ],
            tableLoading: true,
            ids: [],
        }
    },
    mounted() {
        this.pageQueryFeedbackListActions(this.feedbackQueryForm);
    },
    computed: {
        ...mapState('feedback', ['feedbackRespData', 'total']),
    },
    methods: {
        ...mapActions('feedback', ["pageQueryFeedbackListActions", "logicDeleteFeedbackByIdActions", "logicBatchDeleteFeedbackByIdsActions"]),

        /**
         * 下拉框事件
         */
        /* selectChange() {
            this.$store.dispatch('feedback/pageQueryFeedbackListActions', this.feedbackQueryForm)
        }, */
        async deleteFeedback(id) {
            this.logicDeleteFeedbackByIdActions(id);
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryFeedbackListActions(this.feedbackQueryForm);
            }, 500);
        },
        HandleBatchDelete() {
            this.logicBatchDeleteFeedbackByIdsActions(this.ids);
            setTimeout(() => {
                message(messageType().success, '操作成功');
                this.pageQueryFeedbackListActions(this.feedbackQueryForm);
            }, 500);
        },
        getColumnIds(ids) {
            this.ids = ids
        },

        querySubmit() {
            this.pageQueryFeedbackListActions(this.feedbackQueryForm);
        },

        /**
         * 多选事件
         */
        handleSelectionChange() { },

        sizeChange(val) {
            this.feedbackQueryForm.pageSize = val;
            this.pageQueryFeedbackListActions(this.feedbackQueryForm);
        },
        currentChange(val) {
            this.feedbackQueryForm.page = val;
            this.pageQueryFeedbackListActions(this.feedbackQueryForm);
        },

        /**
         *  分页查询
         */
        // 每页条数
        handleSizeChange(val) {
            this.feedbackQueryForm.pageSize = val;
            this.$store.dispatch('feedback/pageQueryFeedbackListActions', this.feedbackForm)
        },
        // 当前页
        handleCurrentChange(val) {
            this.feedbackQueryForm.page = val;
            this.$store.dispatch('feedback/pageQueryFeedbackListActions', this.feedbackForm)
        }
    },

}
</script>
<style lang="scss">
.box {
    width: 100%;

    .query-box {
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height: 55px;
        margin: 10px;

        .line-center {
            padding: 10px 10px 10px 5px;
        }
    }

    .table {
        margin: 10px;
        max-height: calc(100vh - 55px - 55px - 30px - 30px);
        // max-height: calc(100vh - 55px - 55px - 30px - 40px);
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .page-box {
            text-align: center;
        }

        // 表格图片
        .el-image__error,
        .el_image,
        img {
            width: 60px;
            height: 60px;
            // border-radius: 50%;
        }
    }
}
</style>